<template>
	<view class="content">
		<view class="title">移动订货电商平台</view>
		<view class="titles">请使用已注册的账号密码</view>
		<view class="form_wrap">
			<u--form :model="formData" :rules="rules" ref="form" errorType="toast">
				<u-form-item prop="mobile" ref="item">
					<view class="form_item">
						<view class="logo">
							<image src="/static/login/mobile.png" style="width: 48rpx;height: 48rpx;"></image>
						</view>
						<view class="input_mo">
							<input v-model="formData.mobile" border="none" placeholder="请输入账号"
								placeholder-style="color:#e2e2e2;"></input>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="password" ref="item">
					<view class="form_item">
						<view class="logo">
							<image src="/static/login/password.png" style="width: 48rpx;height: 48rpx;"></image>
						</view>
						<view class="input_mo">
							<input v-model="formData.password" border="none" placeholder="请输入2-6位密码"
								placeholder-style="color:#e2e2e2;"></input>
						</view>
					</view>
				</u-form-item>
			</u--form>
			<view class="radioGroup">
				<u-checkbox-group placement="row">
					<u-checkbox v-model="remember" @change="remember=!remember" :checked="remember"
						activeColor="rgba(3, 185, 209, 1)" label="记住密码" shape="circle">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="radioGroup" style="margin-top: 80rpx;">
				<u-checkbox-group placement="row" v-model="treaty">
					<u-checkbox activeColor="rgba(3, 185, 209, 1)" label="同意《平台服务协议》和《隐私政策》" shape="circle">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="btn_wrap">
				<button class="submit_btn" @tap="$u.throttle(submit, 500, false)">登录</button>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		login
	} from '@/api/login.js'
	export default {
		data() {
			return {
				formData: {
					mobile: '',
					password: ''
				},
				rules: {
					mobile: [{
						required: true,
						min: 6,
						max: 20,
						message: '账号不正确',
						trigger: ['blur']
					}],
					password: [{
						required: true,
						min: 6,
						max: 10,
						message: '请输入密码',
						trigger: ['blur']
					}]
				},
				treaty: [],
				remember: false
			}
		},
		mounted() {
			// 检查本地存储中是否有记住的用户名和密码
			const savedMobile = uni.getStorageSync('mobile');
			const savedPassword = uni.getStorageSync('password');

			if (savedMobile && savedPassword) {
				this.formData.mobile = savedMobile;
				this.formData.password = savedPassword;
				this.remember = true;
			}
		},
		methods: {
			submit() {
				// 进行登录验证，验证成功后保存用户名和密码到本地存储
				if (this.remember) {
					uni.setStorageSync('mobile', this.formData.mobile);
					uni.setStorageSync('password', this.formData.password);
				} else {
					// 如果用户未勾选“记住我”，清除本地存储中的用户名和密码
					uni.removeStorageSync('mobile');
					uni.removeStorageSync('password');
				}
				if (this.treaty.length == 0) {
					uni.$u.toast('请阅读并勾选页面协议')
					throw new Error('请阅读并勾选页面协议')
				}
				uni.showLoading({
					title: '正在登录'
				})
				this.$refs.form.validate().then(res => {
					let params = {
						user_name: this.formData.mobile,
						password: this.formData.password
					}
					login(params)
						.then(res => {
							this.$store.commit('SET_TOKEN', res.data.token)
							this.$store.commit('SET_USER_INFO', res.data.userInfo)
							uni.hideLoading()
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}, 100)
						})

				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 60rpx 25rpx;
		background: rgba(247, 248, 250, 1);

		.title {
			width: 100%;
			text-align: center;
			font-size: 60rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			margin-top: 60px;
		}

		.titles {
			width: 100%;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(150, 151, 153, 1);
			text-align: center;
			margin: 40rpx 0rpx;
		}

		.form_wrap {
			width: 100%;
			margin-top: 80rpx;
			box-sizing: border-box;

			.form_item {
				width: 100%;
				height: 100rpx;
				border-radius: 200rpx;
				background: #fff;
				padding: 10rpx 0rpx 10rpx 60rpx;
				box-sizing: border-box;
				position: relative;

				.logo {
					position: absolute;
					top: 25rpx;
					left: 30rpx;
					display: inline-block;
					width: 48rpx;
					height: 48rpx;
				}

				.input_mo {
					position: absolute;
					top: 25rpx;
					left: 90rpx;
					display: inline-block;
				}
			}

			.radioGroup {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(50, 50, 51, 1);
				margin-top: 20rpx;
			}

			.btn_wrap {
				width: 100%;
				margin-top: 40rpx;

				.submit_btn {
					width: 100%;
					height: 88rpx;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 700;
					text-align: center;
					line-height: 88rpx;
					border-radius: 200rpx;
					background: rgba(3, 185, 209, 1);

				}
			}
		}
	}
</style>